<!--
 * @Author: lee
 * @Date: 2024-01-15 09:39:24
 * @LastEditors: lee
 * @LastEditTime: 2024-01-15 13:08:25
 * @Description: file content
-->
<!--
 * @Author: lee
 * @Date: 2024-01-15 09:39:24
 * @LastEditors: lee
 * @LastEditTime: 2024-01-15 10:42:13
 * @Description: file content
-->
<template>
  <div>
    <h2 class="border-b-2 mb-2 p-1 text-gray-500 text-lg">{{ $t('test.pageTitle') }}</h2>
    <div class="border-b-2 mb-2 p-1">
      <h3 class="text-green-500">{{ $t('test.test1') }}</h3>
      <svg-icon slot="prefix" icon-class="email" class="el-input__icon input-icon" />
    </div>
    <div class="border-b-2 mb-2 p-1">
      <h3 class="text-red-500">{{ $t('test.test2') }}</h3>
      <!-- element 国际化 -->
      <el-date-picker v-model="date" type="date"></el-date-picker>
      <el-button type="primary">{{ $t('common.add') }}</el-button>
      <!-- 自定义Language切换语言组件 -->
      <div class="flex">
        <span>{{ $t('test.click') }}</span>
        <Language />
      </div>
      <div>lang: {{ $i18n.locale }}</div>
    </div>
    <ul class="border-b-2 mb-2 p-1">
      <li v-for="car in carList">{{ car.id + '-' + car.name }}</li>
    </ul>
    <h4>{{homeData}}</h4>
  </div>
</template>

<script>
export default {
  name: "Nuxt2TemplateIndex",
  middleware: 'auth',
  data() {
    return {
      date: null,
      carList: []
    };
  },

  //服务端渲染：服务器请求并渲染数据 这个钩子内部不能使用this
  async asyncData({$axios,$testAPI, route }) {
    //query 等价于 this.$route.query  params 等价于 this.$route.params
    console.log("ctx", route.query, route.params);
    //模拟发送请求
    let carList = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve([
          { id: 1, name: "宝马" },
          { id: 2, name: "奔驰" },
          { id: 3, name: "五菱" }
        ]);
      }, 1000);
    });

    const homeRes = await $axios.get('/home');
    const homeData = homeRes.data
    console.log('testAPI--',$testAPI);
     const homeRes1 = await $testAPI.getHome({
      id:1
     })
     console.log('homeRes1--',homeRes1);
    return { carList ,homeData}; //这个数据将自动合并到组件data()
  },

  //客户端渲染钩子
  // async mounted() {
  //     //演示调用自己写的api
  //     //await this.$demoAPI.getInfo()

  //     let cartList = [
  //         {id: 1,name: '宝马'},
  //         {id: 2,name: '奔驰'},
  //         {id: 3,name: '五菱'},
  //     ]
  //     this.carList = cartList
  // },

  methods: {}
};
</script>

<style lang="scss" scoped></style>